<!-- 首页小头部 -->
<template>
  <div id="TopHeight">
    <div class="top_l">
      <h4>首页</h4>
    </div>
    <div class="top_r">
      <el-date-picker
        v-model="TimeRange"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        size="small"
        class="margin_r_20"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="DatePickerChange"
      />
      <el-dropdown trigger="click">
        <el-button size="small" icon="el-icon-download" type="primary">
          下载
          <i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-printer">打印</el-dropdown-item>
          <el-dropdown-item icon="el-icon-download">下载</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Name',
  data() {
    return {
      TimeRange: '', // 时间范围数组
      // 时间范围选择器快捷键
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 获取时间范围选择器
    DatePickerChange(DatePickerChange) {
      console.log('获取时间范围选择器', DatePickerChange)
      this.TimeRange = DatePickerChange
    }
  }
}
</script>

<style lang='scss' scoped>
#TopHeight{
  background: #fff;
  display:flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding:10px 20px;
  border-radius: 10px;
  .top_l{
    font-size: 1.2rem;
    h4{
      padding: 0;
      margin: 0;
    }
  }
  .top_r{
    display: flex;
    align-items: center;
  }
}
</style>
